<template>
  <!-- 评论区 -->
  <div>
    <!-- <div v-for="(item, index) in commotList" :key="index">
      <div>
        一级评论
        <div>
          <div>评论</div>
          <div>回复</div>
        </div>
      </div>
      <div v-for="(v, i) in commotList2" :key="i">
        <div v-if="flag3">111111111</div>
        <div v-if="flag4">二级评论回复区</div>
      </div>
    </div> -->
    <div class="comment-item" v-for="(item, index) in commotList" :key="index">
      <div class="remarks-items">
        <div class="portrait">
          <img
            class="imgs"
            :src="
              item.createByFace
                ? item.createByFace
                : require('@/assets/images/default_avatar.png')
            "
            alt=""
          />
          <div class="perinfo">
            <div class="nikename">{{ item.createByName }}</div>
            <div class="time">{{ item.createTime }}</div>
          </div>
        </div>
        <div class="details" style="">
          <div class="desc">{{ item.details }}</div>
          <div style="display: flex">
            <img
              :src="v"
              v-for="(v, i) in item.imgUrl"
              :key="i"
              alt=""
              style="width: 58px; height: 58px; margin-right: 5px"
            />
          </div>
        </div>
        <div
          style="
            flex-direction: column;
            display: flex;
            justify-content: space-between;
          "
        >
          <div class="option">
            <div class="option-items" @click="getComment2(item.id)">
              <img class="imgs" src="../../assets/images/desc2x.png" mode="" />
              <div class="nun">{{ item.replyNum }}评论</div>
            </div>
            <div
              class="commot-items"
              @click="toCommot2(item.id)"
              style="margin-left: 10px"
            >
              <div
                class="nun"
                style="color: #9d9d9d; margin-right: 10px; cursor: pointer"
              >
                回复
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="commot">
        <div class="commot-box" v-if="itemId == item.id && flag4">
          <div v-for="(v, i) in commotList2" :key="i" class="commot-item">
            <div style="display: flex">
              <img
                :src="
                  v.createByFace
                    ? v.createByFace
                    : require('@/assets/images/default_avatar.png')
                "
                class="ficeImg"
                alt=""
              />
              <div class="commotNikename">{{ v.createByName }}:</div>
              <div></div>
              <div class="commotdesc">{{ v.details }}</div>
            </div>
            <div style="margin-top: 3px">{{ v.createTime }}</div>
          </div>
          <div
            @click="getMore"
            v-if="total > rows"
            style="text-align: center; margin-bottom: 10px"
          >
            查看更多
          </div>
        </div>
        <div v-if="itemId == item.id && flag3" style="margin-top: 10px">
          <textarea
            style="
              padding: 15px 20px;
              width: 100%;
              height: 100px;
              border: 1px solid #9d9d9d;
              outline: none;
            "
            v-model="commetText"
            @change="getinserVal"
            placeholder="说点什么呗~"
            class="textarea"
            name=""
            id=""
            cols="30"
            rows="10"
          ></textarea>
          <div class="comfor">
            <div class="btnsGroup">
              <div class="cancle" @click="cancle2()">取消</div>
              <div class="cert" @click="confirm2()">确定</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getInfo,
  getCommentlist,
  publishComment,
  getCommentList,
  publishComment2,
} from "@/api/informat.js";
import { onLoadFile } from "@/api/otwoo.js";
export default {
  props: {
    // commentId: {
    //   // 是否展示搜索栏下方热门搜索
    //   type: String,
    //   default: "",
    // },
    informationId: {
      type: String,
      default: "",
    },
    flag: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 一级评论列表
      commotList: [],
      // 二级评论列表
      commotList2: [],
      page: 1,
      rows: 10,
      flag3: false,
      imgName: "",
      flag1: "",
      commetText: "",
      visible: false,
      uploadList: [],
      imgs: [],
      itemId: "", //打开的二级评论ID
      flag4: false,
      total: 0,
    };
  },
  created() {
    console.log(this.informationId);
  },
  mounted() {
    console.log(this.informationId);
    this.getComment(this.informationId);
  },
  watch: {
    flag(v) {
      this.getComment(this.informationId);
    },
  },
  methods: {
    // 打开回复一级评论文本框
    toCommot2(id) {
      this.itemId = id;
      this.commentId = id;
      this.flag3 = !this.flag3;
      //   this.getComment2();
    },
    // 获取评论列表
    getComment(id) {
      let data = {
        page: this.page,
        rows: this.rows,
        informationId: id || this.$route.query.id || this.informationId,
      };
      getCommentList(data).then((res) => {
        if (res.success) {
          this.commotList = res.result.rows;
          this.commotList.forEach((v) => {
            if (v.imgUrl) {
              let arr = v.imgUrl.split(",");
              v.imgUrl = arr;
            }
          });
        }
      });
    },
    getMore() {
      this.rows += 10;
      this.getcommot();
    },
    // 获取二级评论
    getComment2(id) {
      this.itemId = id;
      this.flag4 = !this.flag4;
      console.log(id);
      this.commentId = id;
      this.getcommot();
    },
    getcommot() {
      let data = {
        page: this.page,
        rows: this.rows,
        commentId: this.commentId,
        informationId:
          this.informationId || this.$route.query.id || this.informationId,
      };
      getCommentlist(data).then((res) => {
        if (res.success) {
          this.commotList2 = res.result.rows;
          this.total = res.result.total;
          console.log(this.total);
        }
      });
    },
    getinserVal(e) {
      console.log("这是是alvalval", e.target.value);
      this.console.log(this.id);
    },

    confirm() {
      let data = {
        informationId:
          this.informationId || this.$route.query.id || this.informationId,
        commentType: 0,
        details: this.insertVal,
        imgUrl: this.imgs.join(","),
      };
      console.log(data);
      publishComment(data).then((res) => {
        if (res.success) {
          this.$Message.success("评论成功");
          this.getComment();
          this.insertVal = "";
          imgUrl = [];
        }
      });
      this.toDesc = true;
    },

    // 提交二级评论
    confirm2() {
      let data = {
        informationId:
          this.informationId || this.$route.query.id || this.informationId,
        commentType: 1,
        details: this.commetText,
        pid: this.commentId,
      };
      publishComment2(data).then((res) => {
        if (res.success) {
          this.$Message.success("评论成功");
          this.flag3 = false;
          this.commetText = "";
          this.getComment();
          this.getcommot();
        }
      });
      this.flag3 = true;
    },
    cancle2() {
      this.flag3 = false;
    },
    cancle() {
      this.toDesc = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.comment-item {
  margin-bottom: 20px;
}
.remarks-items {
  display: flex;
  width: calc(1039 / 1920 * 100vw);
  margin: 0 auto;
  padding: 20px ;
  border-bottom: 1px #e1e1e1 solid;
  .portrait {
    display: flex;
    justify-content: start;
    align-items: center;
    .imgs {
      width: calc(60 / 1920 * 100vw);
      height: calc(60 / 1920 * 100vw);
      margin-right: calc(15 / 1920 * 100vw);
    }
    .perinfo {
      // width: 64px;
      // height: 16px;
      height: calc(60 / 1920 * 100vw);
      font-size: 16px;
      font-weight: 400;
      color: #070a0c;
      .nikename {
      }
      .time {
        // width: 61px;
        // height: 9px;
        /*margin-top: 20px;*/
        text-align: center;
        font-size: 12px;
        color: #cbcbcb;
      }
    }
  }
  .details {
    flex: 1;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
  }
  .option {
    display: flex;
    justify-self: start;
    align-items: center;
    &-items {
      // line-height: calc(20 / 1920 * 100vw);
      margin-left: calc(15 / 1920 * 100vw);
      display: flex;
      justify-content: start;
      align-items: center;
      .imgs {
        width: calc(14 / 1920 * 100vw);
        height: calc(14 / 1920 * 100vw);
        margin-right: calc(5 / 1920 * 100vw);
        cursor: pointer;
      }
      .nun {
        color: #9d9d9d;
        font-size: calc(14 / 1920 * 100vw);
        cursor: pointer;
      }
      .report {
        color: #9d9d9d;
        font-size: calc(14 / 1920 * 100vw);
        margin-left: calc(14 / 1920 * 100vw);
        cursor: pointer;
      }
    }
  }
}
.comment {
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  margin-top: calc(30 / 1920 * 100vw);
  display: flex;
  justify-content: space-between;
  padding: calc(30 / 1920 * 100vw) calc(60 / 1920 * 100vw);
  .commentBtn {
    padding: 2px 5px;
    line-height: calc(48 / 1920 * 100vw);
    background: #fd5151;
    border-radius: calc(5 / 1920 * 100vw);
  }
}
.ficeImg {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.commot-box {
  padding: 10px;
}
.commot {
  background-color: #eee;
  margin-top: 10px;

  // .commot-box {
  margin-left: 150px;
  .commot-item {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    .commotNikename {
      margin-right: 10px;
      color: #fd5151;
    }
    .commotdesc {
      color: #070a0c;
    }
  }
  // }
}
.btnsGroup {
  display: flex;
  justify-content: right;
  .cancle {
    width: calc(70 / 1920 * 100vw);
    height: calc(36 / 1920 * 100vw);
    line-height: calc(36 / 1920 * 100vw);
    border: 1px solid #fd5151;
    color: #fd5151;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    margin-right: calc(18 / 1920 * 100vw);
  }
  .cert {
    width: calc(70 / 1920 * 100vw);
    height: calc(36 / 1920 * 100vw);
    // height: 14px;
    font-size: 14px;
    border-radius: 4px;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    background: #fd5151;
    line-height: calc(36 / 1920 * 100vw);
  }
}
</style>
